<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../jquery1.11.3.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 2000px;
        }

        .share {
            position: fixed;
            width: 30px;
            bottom: 50px;
            right: 30px;
            ;
        }

        .share a {
            display: block;
            width: 30px;
            height: 30px;
            background: url('./images/share.png') no-repeat;
            text-indent: -9999em;
            margin-bottom: 2px;
            /* css3动画配合:hover伪类 */
            transition: all 0.4s ease
        }

        .share a.top {
            background-position: 0 -120px;
        }

        .share a.top:hover {
            background-position: -30px -120px;
        }

        .share a.sina {
            background-position: 0 0
        }

        .share a.sina:hover {
            background-position: -30px 0
        }

        .share a.weibo {
            background-position: 0 -30px;
        }

        .share a.weibo:hover {
            background-position: -30px -30px;
        }
    </style>
    <script>
        $(function () {
            // 返回top事件函数
            let comeTop=function(){
                let $top=$('.share .top')
                $top.hide()
                // 浏览器窗口scroll事件
                $(window).on('scroll',function(){
                    // 滚动条超过200px slideDown（）显示出来
                    $(this).scrollTop()<=200?$top.slideUp(400):$top.slideDown(400)
                })
                // 返回顶部功能 a链接做效果最好阻止默认行为
                $top.on('click',function(){
                   $('body,html').animate({scrollTop:0},500)
                //    阻止浏览器默认行为
                   return false
                })
            }
            comeTop()
        })
    </script>
</head>

<body>
    <div class="share">
        <a class="top" href="javascript:;">top</a>
        <a class="sina" href="javascript:;">sina</a>
        <a class="weibo" href="javascript:;">weibo</a>
    </div>
</body>

</html>